
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="axios.min.js"></script>
  </head>
  <body>
    修改
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="button" name="" id="" value="修改" onclick="updateProduct()" />
    <script>
      // 跳转了修改页面-- 需要在 输入框中显示 要修改的商品的信息
      //  ****** 在a标签跳转过程中 把 要修改的商品的id 传递到 修改页面
      //   update.html?id=商品的id
      // 修改页面 就可以获取id ，根据 商品id  调用 接口获取商品的详情--》输入框
      //   http://127.0.0.1:5500/day25/25-%E4%BB%A3%E7%A0%81/admin/update.html?id=643725
      // 修改页面测试的 ，通过商品列表 点击 跳转再测试
      //获取 当前页面 url 后面 ？id=xxx
      //   location.search ---> "?id=643725"
      console.log(location.search); //?id=643725
      //   let searchStr = location.search.slice(1);
      //   console.log(searchStr); //id=643725&aa=2&bb=2
      //   let key = "id";
      //   let value = null;
      //   let arr = searchStr.split("&");
      //   console.log(arr);
      //   arr.forEach((v) => {
      //     let tempArr = v.split("=");
      //     console.log(tempArr);
      //     if (tempArr[0] == key) {
      //       value = tempArr[1];
      //     }
      //   });
      //   console.log(value); //643725

      //   把搜索字符串 ？id=22&a=2&b=2 转为对象
      let searchObj = new URLSearchParams(location.search);
      console.log(searchObj);
      //获取 id 的值
      let pid = searchObj.get("id");
      console.log(pid);
      let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
      axios.get(detailProductAPI, { params: { id: pid } }).then((r) => {
        //r.data 服务器返回的数据
        let pObj = r.data.data;
        console.log(pObj);
        let ipts = document.querySelectorAll("input");
        ipts[0].value = pObj.pname;
        ipts[1].value = pObj.pprice;
        ipts[2].value = pObj.pimg;
        ipts[3].value = pObj.pdesc;
      });
      /* 
      根据商品 id 获取商品详情接口

     接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
    接口请求方式：get
    接口参数：
    id  商品的id
    使用方式
    获取id为1的商品的详情
    http://jx.xuzhixiang.top/ap/api/detail.php?id=1
    服务器返回json数据

      
      */

      // 修改接口 需要把 所有的数据都传给服务器
      //   接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
      //      接口请求方式：get
      //      接口参数：

      // pid（必选）商品的id
      // pname（必选）商品
      // pprice（必选）商品
      // pdesc（必选）商品
      // pimg（必选）商品
      // 使用方式

      async function updateProduct() {
        let ipts = document.querySelectorAll("input");
        let pname = ipts[0].value;
        let pprice = ipts[1].value;
        let pimg = ipts[2].value;
        let pdesc = ipts[3].value;
        //pid 全局变量
        let params = { pname, pprice, pimg, pdesc, pid };
        console.log(params);
        // 调用修改接口
        let updateProAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
        let r = await axios.get(updateProAPI, { params });
        console.log(r.data);
        //  修改成功跳转页面
        location.href = "首页.html";
      }
    </script>
  </body>
</html>
